<template>
    <div id="indexPage">
        <mu-appbar color="primary" class="index_header">
            <mu-button flat slot="left" @click="open = !open">
                <span class="iconfont icon-menu" style="font-size:30px"></span>
            </mu-button>Twinkle
            <mu-button flat slot="right" @click="reload">
                <span class="iconfont icon-refresh" style="font-size:30px"></span>
            </mu-button>
            <mu-button flat slot="right">
                <span class="iconfont icon-sign-out" style="font-size:30px"></span>
            </mu-button>
        </mu-appbar>
        <mu-drawer :open.sync="open" :docked="docked" class="index_side">
            <mu-list toggle-nested>
                <template v-for="item in sideList">
                    <template v-if="!item.children">
                        <router-link :to="item.url" :key="item.url">
                            <mu-list-item @click="open = false" button>
                                <mu-list-item-title>{{ item.content }}</mu-list-item-title>
                            </mu-list-item>
                        </router-link>
                    </template>
                    <template v-else>
                        <mu-list-item
                            :key="item.url"
                            button
                            :ripple="false"
                            nested
                            :open="subOpen === item.icon"
                            @toggle-nested="subOpen = arguments[0] ? item.icon : ''"
                        >
                            <mu-list-item-title>{{ item.content }}</mu-list-item-title>
                            <mu-list-item-action>
                                <mu-icon
                                    class="toggle-icon"
                                    size="24"
                                    value="keyboard_arrow_down"
                                    style="font-style:normal;line-height:24px"
                                ></mu-icon>
                            </mu-list-item-action>
                            <router-link
                                :to="v.url"
                                v-for="v in item.children"
                                :key="v.url"
                                :ripple="false"
                                slot="nested"
                            >
                                <mu-list-item button @click="open = false">
                                    <mu-list-item-title>{{ v.content }}</mu-list-item-title>
                                </mu-list-item>
                            </router-link>
                        </mu-list-item>
                    </template>
                </template>
            </mu-list>
        </mu-drawer>
        <mu-container class="nprogress-wrap">
            <router-view class="index_body"></router-view>
        </mu-container>
    </div>
</template>

<script>
export default {
    inject: ["reload"],
    name: "Index",
    data() {
        return {
            docked: false,
            open: false,
            subOpen: "",
            sideList: [
                {
                    icon: "home",
                    content: "首页",
                    url: "/index/home",
                },
                {
                    icon: "dashboard",
                    content: "看板",
                    url: "/index/dashboard",
                },
                {
                    icon: "people",
                    content: "个人中心",
                    children: [
                        {
                            content: "信息查询",
                            url: "/index/infoService",
                        },
                        {
                            content: "关于我们",
                            url: "/index/aboutUs",
                        },
                    ],
                },
            ],
        };
    },
    computed: {
        isPc() {
            let userAgentInfo = navigator.userAgent;
            let flag = true;
            const Agents = [
                "Android",
                "iPhone",
                "SymbianOS",
                "Windows Phone",
                "iPad",
                "iPod",
            ];
            for (let v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        },
    },
    methods: {
        //导航栏刷新
        refreshPage() {
            this.reload();
        },
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {},
        },
        deep: true,
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
        console.log(this.$store.states.message);
    },
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>

<style scoped lang="less">
#indexPage {
    background-color: #f2f2f2;
    .index_header {
        width: 100%;
        height: 64px;
    }
    .index_side {
        padding: 10px;
    }
    .index_body {
        min-height: calc(100vh - 64px);
        padding: 35px 0;
    }
    .container {
        padding: 0 15px;
    }
}
</style>